<template>
    <view class="mobile-item-container">
        <Navbar title="客户详情" bgColor="#fff" :h5Show="false" :autoBack="true" :border="true"></Navbar>
        <view style="width: 100%; padding: 20px;">
            <u-row customStyle="margin-bottom: 10px">
                <u-col span="4">
                    <view>线索名称：</view>
                </u-col>
                <u-col span="8">
                    <view style="display: flex;">
                        {{ customerDetails.name }}
                        <!-- <u-icon name="phone-fill" size="20" color="#1b64edb5" style="margin-left: 20px;"
                            @click="handleCallDial(customerDetails)"></u-icon>
                        <u-icon name="man-add-fill" size="20" color="#1b64edb5" style="margin-left: 10px;"
                            @click="handleAddWx(customerDetails)"></u-icon> -->
                    </view>
                </u-col>
            </u-row>
            <u-row customStyle="margin-bottom: 10px">
                <u-col span="4">
                    <view>城市：</view>
                </u-col>
                <u-col span="8">
                    <view> {{ customerDetails.city }}</view>
                </u-col>
            </u-row>
            <u-row customStyle="margin-bottom: 10px">
                <u-col span="4">
                    <view>跟进状态：</view>
                </u-col>
                <u-col span="8">
                    <view> {{ getDictionaryLable(customerDetails.status, columnsPicker) }}</view>
                </u-col>
            </u-row>
            <u-row customStyle="margin-bottom: 10px">
                <u-col span="4">
                    <view>客户星级：</view>
                </u-col>
                <u-col span="8">
                    <view> {{ getDictionaryLable(customerDetails.starStatus, columnsStarPicker) }}</view>
                </u-col>
            </u-row>
            <u-row customStyle="margin-bottom: 10px">
                <u-col span="4">
                    <view>申请时间：</view>
                </u-col>
                <u-col span="8">
                    <view>{{ customerDetails.createTime }}</view>
                </u-col>
            </u-row>
        </view>

        <view>
            <u-tabs :list="list" @click="clickTabs" :scrollable="false"></u-tabs>
            <view v-for="(item, index) in followRecords" style="padding: 20px; border-bottom: 1px solid #d0cfcf;">
                <view v-if="item.type == 1">
                    <view style="line-height: 3vh;">跟进人：{{ item.username }}</view>
                    <view style="line-height: 3vh;">跟进时间：{{ item.createTime }}</view>
                    <view style="line-height: 3vh;"><span v-html="item.message"></span></view>
                </view>
                <view v-else>
                    <view style="line-height: 3vh;">分配人：{{ item.username }}</view>
                    <view style="line-height: 3vh;">分配时间：{{ item.createTime }}</view>
                    <view style="line-height: 3vh;"><span v-html="item.message"></span></view>
                </view>
            </view>
        </view>
        <!-- <u-picker :show="showPicker" :columns="columnsPicker" keyName="label" @confirm="nationSel"
            @cancel="showPicker = false" @close="showPicker = false"></u-picker>

        <u-picker :show="showCard" :columns="columnsCard" keyName="label" @cancel="showCard = false"
            @confirm="handleConfirmCard"></u-picker> -->

        <!-- <u-modal :show="showModal" :title="title" @cancel=" showModal = false" :showCancelButton="true" cancelText="取消"
            @confirm="handleConfirmWx">
            <view class="slot-content">
                <u-form labelPosition="left" :model="wxForm" :rules="wxRules" ref="wxuForm" labelWidth="100">
                    <u-form-item label="验证信息" prop="vinfo" borderBottom ref="vinfo" required>
                        <u-input v-model="wxForm.vinfo" border="none" placeholder="请输入验证信息"></u-input>
                    </u-form-item>
                    <u-form-item label="备注" prop="note" borderBottom ref="note" style="padding-top: 10px">
                        <u-input v-model="wxForm.note" border="none" placeholder="请输入备注"></u-input>
                    </u-form-item>
                </u-form>
            </view>
        </u-modal> -->

        <u-back-top :scrollTop="scrollTop" :mode="mode" :iconStyle="iconStyle"></u-back-top>
    </view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import { getCustomers, currentDial, currentQuery, addFriend, putCustomers, dictionaries } from '@/api/api'

export default {
    components: {
        Navbar
    },
    data() {
        return {
            scrollTop: 0,
            mode: 'square',
            iconStyle: {
                fontSize: '32rpx',
                color: '#2979ff'
            },
            customerDetails: {},
            showFollowUp: false,
            followUpForm: {
                statusLabel: '',
                followRemark: ''
            },
            followUpRules: {
                statusLabel: [
                    { required: true, message: '请选择跟进状态', trigger: 'change' }
                ],
                followRemark: [
                    { required: true, message: '请输入跟进内容', trigger: 'blur' }
                ]
            },
            showPicker: false,
            columnsPicker: [],
            showCard: false,
            columnsCard: [
                [{
                    label: '卡1',
                    id: 1,
                }, {
                    label: '卡2',
                    id: 2
                }]
            ],
            showModal: false,
            title: '',
            wxForm: {
                vinfo: '',
                note: ''
            },
            wxRules: {
                vinfo: [
                    { required: true, message: '请输入验证信息', trigger: 'blur' }
                ]
            },

            columnsPicker: [],
            columnsStarPicker: [],
            list: [
                {
                    name: "跟进记录",
                    badge: {
                        value: '',
                    },
                    key: 1,
                },
                {
                    name: "分配记录",
                    badge: {
                        value: '',
                    },
                    key: 0,
                },
            ],
            followRecords: [],
            customerId: ''

        }
    },
    created() {
        this.loadCustomerDetails()
        this.getDictionaries()
    },
    onLoad(option) {
        this.customerId = option.id
        console.log("optionoption", option)

    },
    methods: {

        // 点击tabs获取值
        clickTabs(key) {
            this.followRecords = []
            this.customerDetails.followRecords.forEach(element => {
                if (element.type == key.key) {
                    this.followRecords.push(element)
                }
                // debugger
            });

            console.log("this.followRecords", this.followRecords)
        },

        async loadCustomerDetails() {
            try {
                // 假设从路由参数获取客户 ID
                // const customerId = this.$route.query.id
                const res = await getCustomers(this.customerId)
                if (res.code === 200) {
                    if (res.data != {}) {
                        this.customerDetails = res.data
                        res.data.followRecords.forEach(element => {
                            if (element.type == 1) {
                                this.followRecords.push(element)
                            }
                        });

                        this.list.map(item => {
                            if (item.key == 1) {
                                item.badge.value = this.followRecords.length

                            } else {
                                item.badge.value = res.data.followRecords.length - this.followRecords.length
                            }
                        })
                    } else {
                        uni.showToast({
                            title: '暂无数据',
                            icon: 'none'
                        });

                    }


                } else {
                    console.error('获取客户详情失败', res)
                }
            } catch (error) {
                console.error('请求出错', error)
            }
        },

        // 根据字典值获取lable
        getDictionaryLable(val, list) {
            let label = ''
            list.forEach(item => {
                if (item.value == val) {
                    label = item.label
                }
            })
            return label
        },


        // 获取字典
        async getDictionaries() {
            const res = await dictionaries()
            if (res.code == 200) {
                this.columnsPicker = res.data.statusList
                this.columnsStarPicker = res.data.starList
            }
        },

        // 点击拨打电话
        async handleCallDial(item) {
            this.showCard = true
            const getPhone = await currentQuery()
            const phone = getPhone.data ? getPhone.data.phone ? false : true : true
            const phone2 = getPhone.data ? getPhone.data.phone2 ? false : true : true
            this.customerDetails = item
        },
        // 选择值确定
        handleConfirmCard(item) {
            if (item.value[0].id === 1) {
                if (this.phone) {
                    uni.showToast({
                        title: '请先安装卡1',
                        icon: 'none'
                    });
                    return
                }
                this.showCard = false;
            } else {
                if (this.phone2) {
                    uni.showToast({
                        title: '请先安装卡2',
                        icon: 'none'
                    });
                    return
                }
                this.showCard = false;
            }
            this.currentDial(item.value[0].id)
        },
        // 拨打电话调用接口
        currentDial(type) {
            currentDial({
                cusId: this.customerDetails.id,
                cardSlotNum: type
            }).then(res => {
                if (res.code === 200) {
                    const msg = JSON.parse(res.msg).message
                    uni.showToast({
                        title: msg,
                        icon: 'none'
                    });
                } else {
                    uni.showToast({
                        title: '拨打失败',
                        icon: 'none'
                    });
                }
            })
        },
        // 点击添加微信
        handleAddWx(item) {
            this.showModal = true
            this.title = '添加微信'
            this.customerDetails = item
        },
        // 微信确定按钮
        handleConfirmWx() {
            this.$refs.wxuForm.validate().then(valid => {
                if (valid) {
                    addFriend({
                        cusId: this.customerDetails.id,
                        ...this.wxForm
                    }).then(res => {
                        if (res.code === 200) {
                            const msg = JSON.parse(res.msg).message
                            uni.showToast({
                                title: msg,
                                icon: 'none'
                            });
                        } else {
                            uni.showToast({
                                title: '添加失败',
                                icon: 'none'
                            });
                        }
                    })
                    this.showModal = false
                    this.wxForm = {
                        vinfo: '',
                        note: ''
                    }
                }
            })
        },
        // 跟进记录提交
        submitFollowUp() {
            this.$refs.followUpForm.validate().then(valid => {
                if (valid) {
                    putCustomers({
                        id: this.customerDetails.id,
                        ...this.followUpForm
                    }).then(res => {
                        if (res.code === 200) {
                            uni.showToast({
                                title: '跟进记录提交成功',
                                icon: 'none'
                            });
                            this.showFollowUp = false
                        } else {
                            uni.showToast({
                                title: '跟进记录提交失败',
                                icon: 'none'
                            });
                        }
                    })
                }
            })
        },
        nationSel(event) {
            this.followUpForm.statusLabel = event.value[0].label
            this.showPicker = false
        }
    }
}
</script>

<style lang="scss" scoped>
.wrap {
    // height: 200vh;
}
</style>
